<template>
  <div
      class="operation-menu-wrapper"
      :class="'file-type-1'"
      ref="operationMenuRef"
  >
    <div class="search-wrapper">
      <el-form :model="form">
        <el-row :gutter="20">
          <el-col :span="6"></el-col>
          <el-col :span="6"></el-col>
          <el-col :span="6"></el-col>
          <el-col :span="6"></el-col>
        </el-row>
        <el-form-item label="上级名称" :label-width="formLabelWidth">
          <el-input v-model="form.parentDepartmentName" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="上级ID" :label-width="formLabelWidth">
          <el-input v-model="form.parentDepartmentId" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="组织名称" :label-width="formLabelWidth">
          <el-input v-model="form.departmentName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="组织ID" :label-width="formLabelWidth">
          <el-input v-model="form.departmentId" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input
              type="textarea"
              placeholder="请输入内容"
              v-model="form.remark"
              maxlength="30"
              show-word-limit
          >
          </el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="operation-wrapper">

    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'

export default {
  name: 'OperationMenu',
  props: {},
  components: {},
  data() {
    return {
      form: {},
      formLabelWidth: '100px'
    }
  },
  computed: {
    ...mapState({
      showUploadMask: state => state.uploadFile.showUploadMask
    }),
    // 屏幕宽度
    screenWidth() {
      return this.$store.state.common.screenWidth
    },

  },
  watch: {
    // 显示拖拽上传文件遮罩
    showUploadMask() {
      this.handleUploadFileBtnClick(3);
    },

  },
  mounted() {

  },
  methods: {}
}
</script>

<style lang="stylus" scoped>
@import '~_a/styles/varibles.styl';

.operation-menu-wrapper.file-type-6 {
  margin: 8px 0;
  justify-content: flex-end;
}

.operation-menu-wrapper {
  padding: 16px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .create-operate-group {
    .upload-drop {
      float: left;

      >>> .el-button {
        border-radius: 4px 0 0 4px;
      }
    }

    .create-drop {
      float: left;
    }
  }

  .batch-operate-group {
    flex: 1;
  }

  .select-file-input {
    margin-right: 8px;
    width: 250px;

    .el-icon-search {
      cursor: pointer;
      font-size: 16px;

      &:hover {
        color: $Primary;
      }
    }
  }

  .batch-icon,
  .model-icon {
    margin-right: 8px;

    &:last-of-type {
      margin-right: 0;
    }
  }

  .model-icon.active {
    color: $Primary;
  }

  .refresh-icon, .batch-icon, .model-icon, .setting-icon {
    font-size: 20px;
    cursor: pointer;
    color: $SecondaryText;

    &:hover {
      color: $Primary;
    }
  }

  .batch-icon.active {
    color: $Primary;
  }
}

.split-line {
  margin: 8px 0;
}

.img-text-wrapper {
  display: flex;
  align-items: center;

  img {
    margin-right: 4px;
    height: 24px;
  }
}
</style>
